import React, { useRef, memo } from 'react';
import { Row, Col, Form, Input, Button, MessagePlugin, DateRangePicker } from 'tdesign-react';
import { FormInstanceFunctions, SubmitContext } from 'tdesign-react/es/form/type';
import { useAppDispatch, useAppSelector } from 'modules/store';
import { selectCourseListSelect, getList } from 'modules/course_selection';

const { FormItem } = Form;
export type FormValueType = {
  name?: string;
  status?: string;
  number?: string;
  time?: string;
  type?: string;
};

export type SearchFormProps = {
  onCancel: () => void;
  onSubmit: (values: FormValueType) => Promise<void>;
};

const SearchForm: React.FC<SearchFormProps> = (props) => {
  const formRef = useRef<FormInstanceFunctions>();
  const dispatch = useAppDispatch();
  const pageState = useAppSelector(selectCourseListSelect);

  const onSubmit = (e: SubmitContext) => {
    if (e.validateResult === true) {
      MessagePlugin.success('查询成功');
    }

    const queryValue = formRef?.current?.getFieldsValue?.(true) as any;

    console.log(queryValue);
    dispatch(getList({ ...queryValue, size: pageState.size, current: pageState.current }));
  };

  const onReset = () => {
    props.onCancel();
    MessagePlugin.success('重置成功');
  };

  return (
    <div className='list-common-table-query'>
      <Form ref={formRef} onSubmit={onSubmit} onReset={onReset} labelWidth={80} colon>
        <Row>
          <Col flex='1'>
            <Row gutter={[16, 16]}>
              <Col span={3} xs={12} sm={6} xl={3}>
                <FormItem label='课程编号' name='courseId'>
                  <Input placeholder='请输入课程编号' />
                </FormItem>
              </Col>
              <Col span={3} xs={12} sm={6} xl={3}>
                <FormItem label='课程名称' name='name'>
                  <Input placeholder='请输入课程名称' />
                </FormItem>
              </Col>
              <Col span={3} xs={12} sm={6} xl={3}>
                <FormItem label='用户名称' name='username'>
                  <Input placeholder='请输入用户名称' />
                </FormItem>
              </Col>
              <Col span={3} xs={12} sm={6} xl={3}>
                <FormItem label='选课日期' name='date'>
                  <DateRangePicker allowInput clearable />
                </FormItem>
              </Col>
            </Row>
          </Col>
          <Col flex='160px'>
            <Button theme='primary' type='submit' style={{ margin: '0px 20px' }}>
              查询
            </Button>
            <Button type='reset' variant='base' theme='default'>
              重置
            </Button>
          </Col>
        </Row>
      </Form>
    </div>
  );
};

export default memo(SearchForm);
